<template>
  <section class="todoapp">
    <hm-header @add="handleAdd"></hm-header>
    <hm-main
      :list="showList"
      @remove-event="handleDelete"
      @changeState="handleState"
      @changeIsall="changeIsall"
    ></hm-main>
    <hm-footer
      :list="list"
      @clear="handleClear"
      :type="type"
      @changeType="changeType"
    ></hm-footer>
  </section>
</template>

<script>
import HmHeader from './components/hm-header.vue'
import HmMain from './components/hm-main.vue'
import HmFooter from './components/hm-footer.vue'
export default {

  components: {
     HmHeader,
    HmMain,
    HmFooter
  },
  props: {},
  data() {
    return {
      list:JSON.parse(localStorage.getItem('todoList'))||[],
      type:'all'
    };
  },
  watch:{
    list:{
      deep:true,
      handler (newvalue){
        localStorage.setItem('todoList', JSON.stringify(newvalue))
      }
    }
  },
  computed: {
    showList(){
      if(this.type==='all') {
        return this.list;
      }else if(this.type==='active'){
        return this.list.filter(item=>item.done===false)
        }else {
          return this.list.filter(item=>item.done===true)
      }
    }
  },
  created() {},
  methods: {
    handleDelete(id){
    this.list=this.list.filter(item=>item.id !== id)
    },
   handleAdd(value){
    this.list.push({
      id:+new Date(),
      name:value,
      done:false
    })
   },
   handleState(done,id){
   const obj= this.list.find(item=>item.id === id)
   obj.done = done
   },
   handleClear(){
   this.list= this.list.filter(item=>item.done===false)
   },
   changeType(type){
    this.type=type
   },
   changeIsall(done){
    this.list.forEach(item=>item.done=done)
   }
  }

}
</script>

<style></style>
